<?php
$basePath = $this->baseUrl('/');
$jsPath = $basePath.'public/js/filemanager/';
$imagePath = $basePath.'public/img/filemanager/';
?>

<script type="text/javascript" src="<?php echo $jsPath;?>jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php echo $jsPath;?>ui/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo $jsPath;?>ui/themes/ui-lightness/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="<?php echo $jsPath;?>ui/external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="<?php echo $jsPath;?>jstree/jquery.tree.min.js"></script>
<script type="text/javascript" src="<?php echo $jsPath;?>ajaxupload.3.6.js"></script>

<script type="text/javascript" language="javascript">
	var frontUrl = '<?php echo $this->baseUrl('/');?>';
	var contextPath = '<?php echo $this->baseUrl('/');?>';
	var baseUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>';
    var directoryUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/directory';
    var filesUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/files';
    var deleteUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/delete';
    var moveUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/move';
    var copyUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/copy';
    var uploadUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/upload';
    var renameUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/rename';
    var foldersUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/folders';
    var createUrl = '<?php echo $this->baseUrl('/'.$this->moduleName.'/'.$this->ctrlName);?>/create';
</script>

<style type="text/css">
body {
	padding: 0;
	margin: 0;
	background: #F7F7F7;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}
img {
	border: 0;
}
#content {
	padding: 0px 10px 7px 10px;
	height: 540px;
}
#menu {
	clear: both;
	height: 29px;
	margin-bottom: 3px;
}
#column-left {
	background: #FFF;
	border: 1px solid #CCC;
	float: left;
	width: 20%;
	height: 400px;
	overflow: auto;
}
#column-right {
	background: #FFF;
	border: 1px solid #CCC;
	float: right;
	width: 78%;
	height: 400px;
	overflow: auto;
	text-align: center;
}
#column-right div {
	text-align: left;
	padding: 5px;
}
#column-right a {
	display: inline-block;
	text-align: center;
	border: 1px solid #EEEEEE;
	cursor: pointer;
	margin: 5px;
	padding: 5px;
}
#column-right a.selected {
	border: 1px solid #7DA2CE;
	background: #EBF4FD;
}
#column-right input {
	display: none;
}
#dialog {
	display: none;
	width: auto;
}

.button {
	display: block;
	float: left;
	padding: 8px 5px 8px 25px;
	margin-right: 5px;
	background-position: 5px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
	height: 10px;
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-weight: bold;
    -moz-box-shadow: inset 0 0 2px 2px #AAA;
    -webkit-box-shadow: inset 0 0 2px 2px #AAA;
    box-shadow: inset 0 0 2px 2px #AAA;
    color: #666;
}
.button:hover {
	-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #2daebf;
    font-weight: bold;
    -moz-box-shadow: inset 0 0 2px 2px #AAA;
    -webkit-box-shadow: inset 0 0 2px 2px #AAA;
    box-shadow: inset 0 0 2px 2px #AAA;
}
.thumb {
	padding: 5px;
	width: 105px;
	height: 105px;
	background: #F7F7F7;
	border: 1px solid #CCCCCC;
	cursor: pointer;
	cursor: move;
	position: relative;
}
.inputs {
    margin-left: 10px;
    float: left;
}
.inputs input {
    border: 0;
    background: transparent;
}
</style>
<div id="content">
  <div id="menu"><a id="create" class="button" title="New folder" style="background-image: url('<?php echo $imagePath;?>folder.png');"><?php echo $this->button_folder; ?></a><a id="delete" title="Delete" class="button" style="background-image: url('<?php echo $imagePath;?>edit-delete.png');"><?php echo $this->button_delete; ?></a><a id="move" title="Move" class="button" style="background-image: url('<?php echo $imagePath;?>edit-cut.png');"><?php echo $this->button_move; ?></a><a id="copy" class="button" title="Copy" style="background-image: url('<?php echo $imagePath;?>edit-copy.png');"><?php echo $this->button_copy; ?></a><a id="rename" title="Rename" class="button" style="background-image: url('<?php echo $imagePath;?>edit-rename.png');"><?php echo $this->button_rename; ?></a><a id="upload" class="button" title="Upload" style="background-image: url('<?php echo $imagePath;?>upload.png');"><?php echo $this->button_upload; ?></a><a id="refresh" title="Refresh" class="button" style="background-image: url('<?php echo $imagePath;?>refresh.png');"><?php echo $this->button_refresh; ?></a>
  <div class="inputs">
<!--  <input type="text" name="width" id="width" value="170" readonly="readonly" class="very-short" maxlength="3"/>x<input type="text" name="height" id="height" class="very-short" value="100" readonly="readonly" maxlength="3"/>(W x H)
-->
  </div>
  </div>
  <div id="column-left"></div>
  <div id="column-right"></div>
  <div class="clearfloat"></div>
</div>
<script type="text/javascript"><!--
$(document).ready(function () {
	//$(this).bind('contextmenu',function(e) {
        //e.preventDefault();
    //});
	$('#column-left').tree({
		data: { 
			type: 'json',
			async: true, 
			opts: { 
				method: 'POST', 
				url: directoryUrl
			} 
		},
		selected: 'top',
		ui: {		
			theme_name: 'classic',
			animation: 700
		},	
		types: { 
			'default': {
				clickable: true,
				creatable: false,
				renameable: false,
				deletable: false,
				draggable: false,
				max_children: -1,
				max_depth: -1,
				valid_children: 'all'
			}
		},
		callback: {
			beforedata: function(NODE, TREE_OBJ) { 
				if (NODE == false) {
					TREE_OBJ.settings.data.opts.static = [ 
						{
							data: 'image',
							attributes: { 
								'id': 'top',
								'directory': ''
							}, 
							state: 'closed'
						}
					];
					
					return { 'directory': '' } 
				} else {
					TREE_OBJ.settings.data.opts.static = false;  
					
					return { 'directory': $(NODE).attr('directory') } 
				}
			},		
			onselect: function (NODE, TREE_OBJ) {
				w = $('#width').val();
				h = $('#height').val();
				$.ajax({
					url: filesUrl,
					type: 'POST',
					data: 'directory=' + encodeURIComponent($(NODE).attr('directory'))+'&width=' +w+'&height=' +h,
					dataType: 'json',
					success: function(json) {
						html = '<div>';
						
						if (json) {
							for (i = 0; i < json.length; i++) {
								
								name = '';
								
								filename = json[i]['filename'];
								
								for (j = 0; j < filename.length; j = j + 15) {
									name += filename.substr(j, 15) + '<br />';
								}
								
								name += json[i]['size'];
								
								html += '<a file="' + json[i]['file'] + '" cache="' + json[i]['thumb'] + '"><img '+'style="width:200px; height:200px;"'+'  src="' + frontUrl + json[i]['thumb'] + '" title="' + json[i]['filename'] + '" /><br />' + name + '</a>';
							}
						}
						
						html += '</div>';
						
						$('#column-right').html(html);
					}
				});
			}
		}
	});	
	
	$('#column-right a').live('click', function () {
		if ($(this).attr('class') == 'selected') {
			$(this).removeAttr('class');
		} else {
			$('#column-right a').removeAttr('class');
			
			$(this).attr('class', 'selected');
		}
	});
	
	$('#column-right a').live('dblclick', function () {
		par = parent.opener.document;
        par.getElementById('<?php echo $this->field;?>').value = $(this).attr('file');
        par.getElementById('<?php echo $this->thumb;?>').value = $(this).attr('cache');
        par.getElementById('<?php echo $this->preview;?>').src = frontUrl + $(this).attr('cache');
        window.close();
        
		
	});		
	
			
	$('#create').bind('click', function () {
		var tree = $.tree.focused();
		if (tree.selected) {
			$('#dialog').remove();
			
			html  = '<div id="dialog" style="width:350px;">';
			html += '<?php echo $this->entry_folder; ?> <input type="text" name="name" value="" /> <input type="button" value="Submit" />';
			html += '</div>';
			
			$('#column-right').prepend(html);
			
			$('#dialog').dialog({
				title: '<?php echo $this->button_folder; ?>',
				resizable: false,
				width: 350
			});	
			$('#dialog input[name="name"]').keypress(function(event) {
		        if (event.keyCode == '13') {
		            $('#dialog input[type=\'button\']').trigger('click');
		        }
		    });
			$('#dialog input[type=\'button\']').bind('click', function () {
				$.ajax({
					url: createUrl,
					type: 'POST',
					data: 'directory=' + encodeURIComponent($(tree.selected).attr('directory')) + '&name=' + encodeURIComponent($('#dialog input[name=\'name\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
							
							tree.refresh(tree.selected);
							
							alert(json.success);
						} else {
							alert(json.error);
						}
					}
				});
			});
		} else {
			alert('<?php echo $this->error_directory; ?>');	
		}
	});
	
	$('#delete').bind('click', function () {
		path = $('#column-right a.selected').attr('file');
		cache = $('#column-right a.selected').attr('cache');
		if (path) {
			if(confirm('Are you sure delete the ['+ path + ']')) {
				$.ajax({
					url: deleteUrl,
					type: 'POST',
					data: 'path=' + path+'&cache=' + cache,
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							var tree = $.tree.focused();
						
							tree.select_branch(tree.selected);
							
							alert(json.success);
						}
						
						if (json.error) {
							alert(json.error);
						}
					}
				});
			}
		} else {
			var tree = $.tree.focused();
			
			if (tree.selected) {
				if(confirm('Are you sure delete the ['+ encodeURIComponent($(tree.selected).attr('directory')) + ']')) {
					$.ajax({
						url: deleteUrl,
						type: 'POST',
						data: 'path=' + encodeURIComponent($(tree.selected).attr('directory')),
						dataType: 'json',
						success: function(json) {
							if (json.success) {
								tree.select_branch(tree.parent(tree.selected));
								
								tree.refresh(tree.selected);
								
								alert(json.success);
							} 
							
							if (json.error) {
								alert(json.error);
							}
						}
					});
				}	
			} else {
				alert('<?php echo $this->error_select; ?>');
			}			
		}
	});
	
	$('#move').bind('click', function () {
		$('#dialog').remove();
		
		html  = '<div id="dialog">';
		html += '<?php echo $this->entry_move; ?> <select name="to" style="width: 120px;"></select> <input type="button" value="Submit" />';
		html += '</div>';

		$('#column-right').prepend(html);
		
		$('#dialog').dialog({
			title: '<?php echo $this->button_move; ?>',
			resizable: false
		});

		$('#dialog select[name=\'to\']').load(foldersUrl);
		
		$('#dialog input[type=\'button\']').bind('click', function () {
			path = $('#column-right a.selected').attr('file');
			if (path) {																
				$.ajax({
					url: moveUrl,
					type: 'POST',
					data: 'from=' + encodeURIComponent(path) + '&to=' + encodeURIComponent($('#dialog select[name=\'to\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
							
							var tree = $.tree.focused();
							
							tree.select_branch(tree.selected);
							
							alert(json.success);
						}
						
						if (json.error) {
							alert(json.error);
						}
					}
				});
			} else {
				var tree = $.tree.focused();
				
				$.ajax({
					url: moveUrl,
					type: 'POST',
					data: 'from=' + encodeURIComponent($(tree.selected).attr('directory')) + '&to=' + encodeURIComponent($('#dialog select[name=\'to\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
							
							tree.select_branch('#top');
								
							tree.refresh(tree.selected);
							
							alert(json.success);
						}						
						
						if (json.error) {
							alert(json.error);
						}
					}
				});				
			}
		});
	});

	$('#copy').bind('click', function () {
		$('#dialog').remove();
		
		html  = '<div id="dialog">';
		html += '<?php echo $this->entry_copy; ?> <input type="text" name="name" value="" /> <input type="button" value="Submit" />';
		html += '</div>';

		$('#column-right').prepend(html);
		
		$('#dialog').dialog({
			title: '<?php echo $this->button_copy; ?>',
			resizable: false
		});
		
		$('#dialog select[name=\'to\']').load(foldersUrl);
		
		$('#dialog input[type=\'button\']').bind('click', function () {
			path = $('#column-right a.selected').attr('file');
							 
			if (path) {																
				$.ajax({
					url: copyUrl,
					type: 'POST',
					data: 'path=' + encodeURIComponent(path) + '&name=' + encodeURIComponent($('#dialog input[name=\'name\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
							
							var tree = $.tree.focused();
							
							tree.select_branch(tree.selected);
							
							alert(json.success);
						}						
						
						if (json.error) {
							alert(json.error);
						}
					}
				});
			} else {
				var tree = $.tree.focused();
				
				$.ajax({
					url: copyUrl,
					type: 'POST',
					data: 'path=' + encodeURIComponent($(tree.selected).attr('directory')) + '&name=' + encodeURIComponent($('#dialog input[name=\'name\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
							
							tree.select_branch(tree.parent(tree.selected));
							
							tree.refresh(tree.selected);
							
							alert(json.success);
						} 						
						
						if (json.error) {
							alert(json.error);
						}
					}
				});				
			}
		});	
	});
	
	$('#rename').bind('click', function () {
		$('#dialog').remove();
		
		html  = '<div id="dialog">';
		html += '<?php echo $this->entry_rename; ?> <input type="text" name="name" value="" /> <input type="button" value="Submit" />';
		html += '</div>';

		$('#column-right').prepend(html);
		
		$('#dialog').dialog({
			title: '<?php echo $this->button_rename; ?>',
			resizable: false
		});
		$('#dialog input[name="name"]').keypress(function(event) {
	        if (event.keyCode == '13') {
	            $('#dialog input[type=\'button\']').trigger('click');
	        }
	    });
		$('#dialog input[type=\'button\']').bind('click', function () {
			path = $('#column-right a.selected').attr('file');
							 
			if (path) {		
				$.ajax({
					url: renameUrl,
					type: 'POST',
					data: 'path=' + encodeURIComponent(path) + '&name=' + encodeURIComponent($('#dialog input[name=\'name\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
							
							var tree = $.tree.focused();
					
							tree.select_branch(tree.selected);
							
							alert(json.success);
						} 
						
						if (json.error) {
							alert(json.error);
						}
					}
				});			
			} else {
				var tree = $.tree.focused();
				
				$.ajax({ 
					url: renameUrl,
					type: 'POST',
					data: 'path=' + encodeURIComponent($(tree.selected).attr('directory')) + '&name=' + encodeURIComponent($('#dialog input[name=\'name\']').val()),
					dataType: 'json',
					success: function(json) {
						if (json.success) {
							$('#dialog').remove();
								
							tree.select_branch(tree.parent(tree.selected));
							
							tree.refresh(tree.selected);
							
							alert(json.success);
						} 
						
						if (json.error) {
							alert(json.error);
						}
					}
				});
			}
		});		
	});
	new AjaxUpload('#upload', {
		action: uploadUrl,
		name: 'image',
		autoSubmit: false,
		responseType: 'json',
		enctype: 'application/x-www-form-urlencoded',
		onChange: function(file, extension) {
			var tree = $.tree.focused();
			
			if (tree.selected) {
				this.setData({'directory': $(tree.selected).attr('directory')});
			} else {
				this.setData({'directory': ''});
			}
			
			this.submit();
		},
		onSubmit: function(file, extension) {
			$('#upload').append('<img src="<?php echo $this->baseUrl('/public/img/');?>loading.gif" id="loading" style="padding-left: 5px;" />');
		},
		onComplete: function(file, json) {
			if (json.success) {
				var tree = $.tree.focused();
					
				tree.select_branch(tree.selected);
				
				alert(json.success);
			}
			
			if (json.error) {
				alert(json.error);
			}
			
			$('#loading').remove();	
		}
	});
	
	$('#refresh').bind('click', function () {
		var tree = $.tree.focused();
		
		tree.refresh(tree.selected);
	});	
});
//--></script>
